import React, { useEffect, useState } from "react";
import styles from './index.module.less'
import { Button, InputNumber, Table } from "antd";
import { useRequest } from "ahooks";
import { getRequestCgi } from '@/request'
import { RECORDTYPE } from "./type";
const editTableCell = () => {
    const [active,setActive] = useState<number | undefined>(0)
    const columns: any = [
        {
            title: '序号',
            dataIndex: 'key',
            width: 80,
            fixed: 'left',
        },
        {
            title: '标签（粗）',
            dataIndex: 'project_thick',
            width: 150,
            fixed: 'left',
        },
        {
            title: '标签（细）',
            dataIndex: 'project_thin',
            width: 150,
            fixed: 'left',
        },
        {
            title: '1月',
            dataIndex: 'm1',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm1')} />
            )
        },
        {
            title: '2月',
            dataIndex: 'm2',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm2')} />)
        },
        {
            title: '3月',
            dataIndex: 'm3',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm3')} />)
        },
        {
            title: '4月',
            dataIndex: 'm4',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm4')} />)
        },
        {
            title: '5月',
            dataIndex: 'm5',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm5')} />)
        },
        {
            title: '6月',
            dataIndex: 'm6',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm6')} />)
        },
        {
            title: '7月',
            dataIndex: 'm7',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm7')} />)
        },
        {
            title: '8月',
            dataIndex: 'm8',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm8')} />)
        },
        {
            title: '9月',
            dataIndex: 'm9',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm9')} />)
        },
        {
            title: '10月',
            dataIndex: 'm10',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm10')} />)
        },
        {
            title: '11月',
            dataIndex: 'm11',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm11')} />)
        },
        {
            title: '12月',
            dataIndex: 'm12',
            width: 150,
            render: (text: number, record: RECORDTYPE) =>
            (<InputNumber
                value={text}
                onChange={(value) => handleChange(value, record.key, 'm12')} />)
        }
    ]
    const [list,setList] = useState<any>()
    
    const { data: dataSource, run }: any = useRequest(() => {
        return getRequestCgi('/api/table-cell-list')
    }, {
        // true 手动触发  false 自动触发
        manual: false
    })

    const handleChange = (value: number | null, rowKey: number, key:string) => {
        const cellList = list && list.map((item: { key: number; }) => {
            if(item.key === rowKey) {
                return { ...item, [key]: value }
            }
            return { ...item }
        })
        setList(cellList)
    }
    useEffect(() => {
        setList(list || dataSource)
    },[dataSource])
    const handleSave = () => {
        console.log(list);
        run()
    }
    
    return (
        <div className={styles.editTableCell}>
            <Button onClick={handleSave}>{'保存'}</Button>
            <Table
                rowClassName={(record,index) => {
                    return index === active ? styles.editTableCell__active : ''
                }}
                dataSource={list}
                columns={columns}
                pagination={false}
                bordered
                scroll={{
                    x: 55 * 5,
                    y: 123 * 5
                }}
                onRow={(_,index) => {
                    return {
                      onClick: () => {
                        setActive(index);
                      }
                    };
                  }}
                rowHoverable={false}
            />
        </div>
    )
}

export default editTableCell;